<template>
  <template v-if="item.children">
    <el-table-column :key="item.key" :label="$t(item.labelId)" align="center">
      <column v-for="child in item.children" :item="child" :key="child.key" :options="options" :fixed="child.fixed"/>
    </el-table-column>
  </template>
  <!-- 格式化方法 -->
  <el-table-column
    v-else-if="item.formatter"
    :label="$t(item.labelId)"
    align="center"
    :min-width="columnWidth ?? 120"
    :formatter="item.formatter"
    :sortable="sortable"
    :prop="item.key"
    :fixed="item.fixed"
    show-overflow-tooltip
  />
  <el-table-column
    v-else
    :label="$t(item.labelId)"
    align="center"
    :min-width="columnWidth ?? 120"
    :sortable="sortable"
    :prop="item.key"
    show-overflow-tooltip
  >
    <template #default="scope">
      <!-- 日期 -->
      <span v-if="item.type === 'date'">{{ handleDate(scope.row) }}</span>
      <!-- 选择类型  -->
      <span v-else-if="item.type === 'option'">{{ handleOption(scope.row) }}</span>
      <!-- 字符串 -->
      <span v-else-if="item.type === 'string'">{{ scope.row[item.key] }}</span>
      <!-- 机构 -->
      <span v-else-if="item.type === 'org'">{{ handleOrg(scope.row) }}</span>
      <!-- 进度条 -->
      <span v-else-if="item.type === 'progress'">
        <table-progress :value="scope.row[item.key]" />
      </span>
    </template>
  </el-table-column>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { BaseColumn } from './types'
import { find, get, map, filter } from 'lodash'
import { ObjectType } from 'typings/interfaces'
import { findNode } from '@/utils/util'
import useOrgTree from '@/hooks/useOrgTree'
import TableProgress from './Progress.vue'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'Column',
  props: {
    item: {
      type: Object as PropType<BaseColumn>,
      required: true,
    },
    options: {
      type: Object as PropType<ObjectType>,
      default: () => [],
    },
  },
  components: {
    TableProgress,
  },
  setup(props) {
    const key = get(props, 'item.key')
    const { orgTree } = useOrgTree()
    const handleOrg = (row: ObjectType) => {
      const value = get(row, key)
      const name = get(findNode(orgTree.value, { id: value }), 'name')
      return name
    }

    return {
      handleOrg,
      columnWidth: props.item?.width,
      sortable: computed(() => (props.item.sortable ? 'custom' : false)),
    }
  },
  methods: {
    handleOption(row: ObjectType) {
      const key = get(this, 'item.key', '')
      if (key == 'assetTypeSmall') {
        for (let i in this.options['assetTypeBig']) {
          if (this.options['assetTypeBig'][i].itemValue == row.assetTypeBig) {
            for (let k in this.options['assetTypeBig'][i].children) {
              if (this.options['assetTypeBig'][i].children[k].itemValue == row.assetTypeSmall) {
                 return this.options['assetTypeBig'][i].children[k].itemText
              }
            }
          }
        }
      } else {
        const value = get(find(this.options[key], { itemValue: get(row, key, '') }), 'itemText')
        return value
      }
    },
    handleDate(row: ObjectType) {
      const key = get(this, 'item.key', '')
      const value = get(row, key)
      return value ? dayjs(value).format(this.item?.formate) : value
    },
    prop({ $index }: ObjectType) {
      if ($index === -1) return ''
      return 'dataSource.' + $index + '.name'
    },
  },
})
</script>
